<template>
  <TnDrawer v-model:visible="drawerVisible">
    <template #title>
      <span class="drawer-title">列设置</span>
      <vxe-tooltip content="“序号”及“操作”首尾标题列默认固定且无法取消及排序" :z-index="2000">
        <span class="column-info-icon">
          <vxe-icon name="question-circle-fill" roll></vxe-icon>
        </span>
      </vxe-tooltip>
    </template>
    <div class="drawer-content">
      <div class="left-fixed-content">
        <Draggable
          item-key="key"
          ghost-class="ghost"
          handle=".drag-widget"
          :animation="200"
          :group="{ name: 'center' }"
          :list="leftFixed"
        >
          <template #item="{ element }">
            <div
              v-if="element.title"
              class="item-content"
              :class="{ actived: hoverItem?.field === element.field }"
              @mouseover="mouseOverHandle(element)"
            >
              <div class="columns-left">
                <i v-if="element.field !== 'rowNo'" class="icpIconfont tuozhuaipaixu drag-widget"></i>
                <span v-else class="empty-span"></span>
                <vxe-checkbox v-model="element.visible"></vxe-checkbox>
                <p>{{ element.title }}</p>
              </div>
              <div class="columns-right">
                <div :class="{ disabled: element.field === 'rowNo' }">
                  <vxe-tooltip content="取消左侧固定" :z-index="2000">
                    <i class="icpIconfont youceguding" @click="cancelLeftHandle(element)"></i>
                  </vxe-tooltip>
                </div>
              </div>
            </div>
          </template>
        </Draggable>
      </div>
      <TnDivider>以上为左固定标题列</TnDivider>
      <div class="center-fixed-content">
        <Draggable
          item-key="key"
          ghost-class="ghost"
          handle=".drag-widget"
          :animation="200"
          :group="{ name: 'center' }"
          :list="centerFixed"
        >
          <template #item="{ element }">
            <div
              class="item-content"
              :class="{ actived: hoverItem?.field === element.field }"
              @mouseover="mouseOverHandle(element)"
            >
              <div class="columns-left">
                <i
                  v-if="element.field !== 'rowNo' || element.field !== 'edit'"
                  class="icpIconfont tuozhuaipaixu drag-widget"
                ></i>
                <span v-else class="empty-span"></span>
                <vxe-checkbox v-model="element.visible"></vxe-checkbox>
                <p>{{ element.title }}</p>
              </div>
              <div v-if="hoverItem?.field === element.field" class="columns-right">
                <vxe-tooltip content="左侧固定" :z-index="2000">
                  <i class="icpIconfont youceguding" @click="addLeftHandle(element)"></i>
                </vxe-tooltip>
                <vxe-tooltip content="右侧固定" :z-index="2000">
                  <i class="icpIconfont zuoceguding" @click="addRightHandle(element)"></i>
                </vxe-tooltip>
              </div>
            </div>
          </template>
        </Draggable>
      </div>
      <TnDivider>以下为右固定标题列</TnDivider>
      <div class="right-fixed-content">
        <Draggable
          item-key="key"
          ghost-class="ghost"
          handle=".drag-widget"
          :animation="200"
          :group="{ name: 'center' }"
          :list="rightFixed"
        >
          <template #item="{ element }">
            <div
              class="item-content"
              :class="{ actived: hoverItem?.field === element.field }"
              @mouseover="mouseOverHandle(element)"
            >
              <div class="columns-left">
                <i v-if="element.field !== 'edit'" class="icpIconfont tuozhuaipaixu drag-widget"></i>
                <span v-else class="empty-span"></span>
                <vxe-checkbox v-model="element.visible"></vxe-checkbox>
                <p>{{ element.title }}</p>
              </div>
              <div class="columns-right">
                <div :class="{ disabled: element.field === 'edit' }">
                  <vxe-tooltip content="取消右侧固定" :z-index="2000">
                    <i class="icpIconfont zuoceguding" @click="cancelRightHandle(element)"></i>
                  </vxe-tooltip>
                </div>
              </div>
            </div>
          </template>
        </Draggable>
      </div>
    </div>
    <div class="drawer-footer">
      <vxe-button @click="drawerVisible = false">取消</vxe-button>
      <vxe-button status="primary" @click="setDefault">恢复默认</vxe-button>
      <vxe-button status="primary" @click="updateColumn">保存</vxe-button>
    </div>
  </TnDrawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TnDrawer from '../TnDrawer/index.vue'
import TnDivider from '../TnDivider/index.vue'
import Draggable from 'vuedraggable'
import { saveUserConfig } from '../../config'
import { cloneDeep } from 'lodash'

const emits = defineEmits(['updateColumn', 'restDefault'])

// 弹出设置
const drawerVisible = ref(false)
const leftFixed = ref<any[]>([])
const centerFixed = ref<any[]>([])
const rightFixed = ref<any[]>([])
const tableName = ref<string | undefined>()
const showDraw = (columns, tName) => {
  console.log(columns)
  drawerVisible.value = true
  leftFixed.value = []
  centerFixed.value = []
  rightFixed.value = []
  tableName.value = tName
  cloneDeep(columns || []).forEach((item) => {
    if (item.fixed === 'left') {
      leftFixed.value.push(item)
    } else if (item.fixed === 'right') {
      rightFixed.value.push(item)
    } else {
      centerFixed.value.push(item)
    }
  })
}

// 点击确定，更新列设置
const updateColumn = () => {
  drawerVisible.value = false
  const columns = [...leftFixed.value, ...centerFixed.value, ...rightFixed.value]
  saveColumn(columns, tableName.value)
}

// 保存列设置
const saveColumn = (columns, tableName) => {
  console.log('columns', columns)
  const params = {
    settingKey: tableName,
    settingJson: JSON.stringify({ columns })
  }
  saveUserConfig(params)!.then(() => {
    emits('updateColumn', columns)
  })
}

// 恢复默认设置
const setDefault = () => {
  emits('restDefault')
}

// 添加左侧固定列
const addLeftHandle = (item) => {
  item.fixed = 'left'
  leftFixed.value.push(item)
  const index = centerFixed.value.findIndex((el) => {
    return el.field === item.field
  })
  if (index > -1) {
    centerFixed.value.splice(index, 1)
  }
}

// 取消左侧固定列
const cancelLeftHandle = (item) => {
  item.fixed = undefined
  centerFixed.value.push(item)
  const index = leftFixed.value.findIndex((el) => {
    return el.field === item.field
  })
  if (index > -1) {
    leftFixed.value.splice(index, 1)
  }
}

// 添加右侧固定列
const addRightHandle = (item) => {
  item.fixed = 'right'
  rightFixed.value.splice(0, 0, item)
  const index = centerFixed.value.findIndex((el) => {
    return el.field === item.field
  })
  if (index > -1) {
    centerFixed.value.splice(index, 1)
  }
}

// 取消右侧固定列
const cancelRightHandle = (item) => {
  item.fixed = undefined
  centerFixed.value.push(item)
  const index = rightFixed.value.findIndex((el) => {
    return el.field === item.field
  })
  if (index > -1) {
    rightFixed.value.splice(index, 1)
  }
}

// 鼠标悬停
const hoverItem = ref()
const mouseOverHandle = (item) => {
  hoverItem.value = item
}

// 关闭抽屉
const closeDraw = () => {
  drawerVisible.value = false
}

defineExpose({
  showDraw,
  updateColumn,
  saveColumn,
  closeDraw
})
</script>
<style lang="less" scoped>
.item-content {
  display: flex;
  justify-content: space-between;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;

  --vxe-primary-color: #1472ff;
  .columns-left {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;

    p {
      margin-bottom: 0;
      line-height: 36px;
      color: #444;
    }

    .drag-widget {
      color: #aeafb2;
      cursor: move;
    }

    .empty-span {
      display: inline-block;
      width: 16px;
    }
  }
  .columns-right {
    line-height: 36px;
    .icpIconfont {
      cursor: pointer;
    }
    .icpIconfont:hover {
      background-color: #cadfff;
      color: var(--vxe-primary-color);
    }
    .disabled {
      cursor: not-allowed;
      .icpIconfont {
        pointer-events: none;
        opacity: 0.7;
      }
    }
  }
}

.actived {
  background-color: #eef5ff;
}

.left-fixed-content,
.right-fixed-content {
  .columns-right {
    .icpIconfont {
      color: #1472ff;
    }
  }
}

.center-fixed-content {
  .columns-right {
    .icpIconfont {
      color: #888888;
    }
  }
}
.drawer-title {
  margin-right: 5px;
}
.column-info-icon {
  color: #aeafb2;
  vertical-align: middle;
  cursor: pointer;
  font-size: 14px;
}
.column-info-icon:hover {
  color: #1472ff;
}
.drawer-footer {
  position: absolute;
  bottom: 0;
  border-top: 1px solid #ededed;
  width: 100%;
  line-height: 48px;
  text-align: right;
  padding: 0 12px;
  background-color: #fff;

  :deep(.vxe-button.type--button:not(.is--circle)) {
    padding: 0 12px;
  }
  :deep(.vxe-button + .vxe-button.type--button) {
    margin-left: 8px;
  }
}

.drawer-content {
  padding: 0 16px 48px 16px;
  height: calc(100vh - 49px);
  overflow-y: auto;
}
</style>
